<template>
<div>
	<div class= "screen">
		<div style= "width:30%">关键字筛选：
			<el-input type= "search" v-model="search" style= "width:70%" placeholder= "请输入关键字"></el-input>
		</div>
	</div>
	
	<el-table
		border
		stripe
		:header-cell-style="{background:'#DCDFE6',color:'#000000'}"
		:data="tables.slice((currentPage-1)*pagesize,currentPage*pagesize)"
		style="width: 100%">
		<el-table-column align="center" sortable prop="squence" label="序号" min-width="60">
		</el-table-column>
		<el-table-column align="center" sortable prop="current_link" label="当前状态" min-width="60">
		</el-table-column>
		
		
		<el-table-column align="center" sortable prop="applicant_name" label="申请单位名称" width="120">
		</el-table-column>
		<el-table-column align="center" sortable prop="applicant_addres" label="申请单位地址" width="120">
		</el-table-column>
		<el-table-column align="center" sortable prop="unit_contact" label="单位联系人" width="60">
		</el-table-column>
		<el-table-column align="center" sortable prop="telephone" label="联系电话" width="95">
		</el-table-column>
		<el-table-column align="center" sortable prop="E_mail" label="E-mail" min-width="100">
		</el-table-column>
		<el-table-column align="center" sortable prop="business_system_name" label="业务系统名称" min-width="60">
		</el-table-column>
		<el-table-column align="center" sortable prop="interface_tel" label="接口人/电话" width="120">
		</el-table-column>
		<el-table-column align="center" sortable prop="remarks1" label="备注1" width="80">
		</el-table-column>

		<el-table-column align="center" sortable prop="vCPU_number" label="vCPU/个" width="60">
		</el-table-column>
		<el-table-column align="center" sortable prop="memory_G" label="内存/G" min-width="60">
		</el-table-column>
		<el-table-column align="center" sortable prop="storage" label="存储" min-width="60">
		</el-table-column>
		<el-table-column align="center" sortable prop="operating_system_version" label="操作系统/版本" width="120">
		</el-table-column>
		<el-table-column align="center" sortable prop="network_requirements" label="网络(IP/掩码/网关/VLAN)" width="120">
		</el-table-column>
		<el-table-column align="center" sortable prop="firewall_policy" label="防火墙策略（源/目的IP/端口、协议）" width="120">
		</el-table-column>
		<el-table-column align="center" sortable prop="network_ip" label="网络IP(掩码/IP)" width="120">
		</el-table-column>

		
		<el-table-column align="center" sortable prop="process" label="工单流程" min-width="180">
			<template slot-scope="scope">
				<p v-for="line in scope.row.process.split('\n')" :key="line">{{line}}</p>
			</template>
		</el-table-column>
	</el-table>
	<div class="paginationClass">
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[5, 10, 20, 40]"
			:page-size="pagesize"
			layout="total, sizes,prev, pager, next"
			:total="tables.length"
			prev-text="上一页"
			next-text="下一页">
		</el-pagination>
	</div>
</div>
</template>


<script>
import axios from 'axios'
import {getCookie} from '@/utils/util'
import Pagination from '../../components/Pagination'

export default {
  name:'orderData',

  data(){
    return{
      currentPage: 1, //默认显示页面为1
      pagesize: 5, //    每页的数据条数      
      search:'',
      orderData:[],
    }
  },
	computed: {
  // 实时监听表格
    tables: function() {
      const search = this.search
      if (search) {
        return this.orderData.filter((currentValue)=> {
          return JSON.stringify(currentValue).indexOf(search)> -1
          })
        }else{
      return this.orderData
      }
      }
  },
  mounted(){
    // console.log('begin get data')
    this.getData();
  },
  methods: {

    handleSizeChange(size){
      this.pagesize = size;
    },
    //点击第几页
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
      /*console.log(this.currentPage) */
    },
    getData(){
			axios.get('/api/done/')
			.then((res) => {
				this.orderData = res.data;
				console.log(this.orderData);
			})
			.catch((error)=>{
				console.log(error);
			})
		}, 
  },
}
</script>

<style scoped>
  .el-form-item .el-input {
    width: 100px;
  }
  a{
    font-size: 12px;
    color: #0000ff;
    text-decoration: none;
  }
</style>
